<script setup lang="js">
import { ref } from 'vue'
import { Icon } from '@iconify/vue'
import { ipc } from '@/utils/ipcRenderer'
import { ipcApiRoute } from '@/api/index'

const isMaximize = ref(false) // 判断当前是否全屏需要恢复窗口大小

const appHeadUtilsHandler = (params) => {
  if (params.action === 'maximize') {
    isMaximize.value = !isMaximize.value
  }
  ipc.invoke(ipcApiRoute.appTopWindowUtilsHandler,params).then(res => {
  }).catch(err => {
  })
}



</script>

<template>
  <div class="app-top-window-utils overflow-hidden bg-white h-12 border-b-gray-200 border-b">
    <div class="left-title">
      <a-avatar shape="square" size="small" src="https://ts1.tc.mm.bing.net/th/id/R-C.00ed20f3414a025760b70efd9b22eb50?rik=gbUTX56EbWfvzQ&riu=http%3a%2f%2fpic.danji100.com%2fupload%2f2023-5%2f2023052610120268325.png&ehk=6OIATj1RD3AWLFmzd1DWB8in796Sa05b6Ql7dnrxc14%3d&risl=&pid=ImgRaw&r=0" class="ml-5" />
      <span class="ml-2 text-xs">
        <span class="">utils-box 活力无限 </span>
        <span> Version:1.0.0</span>
      </span>
    </div>
    <div class="right-utils flex items-center h-full">
      <Icon icon="mdi:minus" class="h-full no-app-region cursor-pointer ml-3 hover:text-gray-300 transition" @click="appHeadUtilsHandler({ action:'minimize' })" />
      <Icon icon="mdi:window-maximize" class="h-full no-app-region cursor-pointer ml-3 hover:text-gray-300 transition" @click="appHeadUtilsHandler({ action:'maximize',flag:isMaximize })" />
      <Icon icon="mdi:close" class="h-full no-app-region ml-3 mr-3 cursor-pointer hover:text-red-700 transition" @click="appHeadUtilsHandler({ action:'close' })" />
    </div>
  </div>
</template>

<style scoped lang="less">
.app-top-window-utils {
  width: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  -webkit-app-region: drag;
}

.no-app-region {
  -webkit-app-region: no-drag;
}
</style>